import { Scrollbars } from "react-custom-scrollbars";
import React from "react";
import { debounce } from "../utils/tools";
import "./style/CustomScrollbars.css";

class CustomScrollbars extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.state = { top: 0, left: 0, opacity: 1, timer: null, debounceFun: null };
    this.scrollbars = React.createRef();
    if (this.props.autoHideTimeout > 0) {
      this.state.debounceFun = debounce(
        () => {
          this.setState({ opacity: 0 });
        },
        this.props.autoHideTimeout,
        true
      );
    }

  }
  
  handleScrollFrame = (values) => {
    this.setState({ top: values.scrollTop, left: values.scrollLeft });
    if (this.state.debounceFun) {
      this.state.debounceFun();
    }
  };
  handleScrollStart = (values) => {
    this.setState({ opacity: 1 });
  };
  render() {
    
    const autoHideStyle = { opacity: this.state.opacity, transition: "opacity " + this.props.autoHideDuration + "ms" };
    return (
      <Scrollbars
        ref={this.scrollbars}
        onScrollStart={this.handleScrollStart}
        onScrollFrame={this.handleScrollFrame}
        renderTrackHorizontal={(props) => <div {...props} className="track-horizontal" style={autoHideStyle} />}
        renderTrackVertical={(props) => <div {...props} className="track-vertical" style={autoHideStyle} />}
        renderThumbHorizontal={(props) => <div {...props} className="thumb-horizontal" style={Object.assign({ top: this.state.top }, autoHideStyle)} />}
        renderThumbVertical={(props) => <div {...props} className="thumb-vertical" style={Object.assign({ top: this.state.top }, autoHideStyle)} />}
        {...this.props}
      >
        {this.props.children}
      </Scrollbars>
    );
  }
}
export default CustomScrollbars;
